<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta th:include="~{layout/head_xadmin :: content}">
</head>
<body>
<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-body ">
          <div class="layui-form layui-col-space5">
            <div class="layui-inline layui-show-xs-block">
              <input type="text" id="search" placeholder="搜索" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-inline layui-show-xs-block">
              <button onclick="search()" class="layui-btn"><i class="layui-icon">&#xe615;</i></button>
            </div>
          </div>
        </div>

        <div class="layui-card-header">
          <button class="layui-btn" onclick="xadmin.open('添加URL','./member-add.html',600,400)"><i
              class="layui-icon"></i>导出
          </button>
        </div>
        <script type="text/html" id="toolbarDemo">
          <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="updatePermission"><i class="layui-icon">&#xe61f;</i>保存授权数据</button>
          </div>
        </script>

        <table id="permission-table" lay-filter="rolePermissionTable"></table>

      </div>
    </div>
  </div>
</div>
</body>
<script>
  var table, roleId = [[${roleId}]]
  layui.use(['table', 'layer', 'jquery'], function () {
    table = layui.table;
    var layer = layui.layer;
    var $ = layui.jquery;

    table.render({
      elem: '#permission-table'
      , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
      , id: 'permissionTableId'
      , limit: 100
      , url: '/admin/role/permissionList' //数据接口
      , where: {"search": $('#search').val(), 'roleId': roleId}
      , page: true //开启分页
      , cols: [
        [ //表头
          {type: 'checkbox', field: 'LAY_CHECKED', width: 100, fixed: 'left', sort: true},
          {field: 'id', title: 'ID', width: 100, sort: true, fixed: 'left'}
          , {field: 'url', title: 'URL', width: 300, sort: true}
          , {
          field: 'method', title: 'GET/POST', width: 150, sort: true, templet: function (data) {
            if (data.method == 'GET') {
              return data.method;
            } else {
              return "<b style='color: red'>" + data.method + "</b>";
            }
          }
        }
          , {field: 'description', title: '描述', width: 400, sort: true}
        ]
      ]
      , parseData: function (res) { //res 即为原始返回的数据
        let data=res.data
        let re=[]
        for(let i=0;i<data.length;i++){
          let temp=data[i]
          if(temp.has==1){
            temp.LAY_CHECKED=true
          }
          re.push(temp)
        }
        return {
          "code": res.code, //解析接口状态
          "msg": res.message, //解析提示文本
          "count": res.total, //解析数据长度
          "data": re //解析数据列表
        };
      }
      , limits: [100, 200, 500]
    });

    //头工具栏事件
    table.on('toolbar(rolePermissionTable)', function (obj) {
      var checkStatus = table.checkStatus(obj.config.id);
      switch (obj.event) {
        case 'updatePermission':
          var data = checkStatus.data;
          layer.confirm('确认要一键批量添加/取消操作吗？__' + data.length, function (index) {
            let ids = []
            for (let i = 0; i < data.length; i++) {
              ids.push(data[i].id)
            }
            $.ajax({
              data: {'ids': ids.length == 0 ? '' : ids.toString(), 'checked': true, 'roleId': roleId},
              url: '/admin/role/updatePermission',
              type: 'post',
              success: function (res) {
                layer.msg(res.message)
                if (res.code == 0) {
                  window.setTimeout(function () {
                    layer.close(index);
                  }, 1200)
                }
              }
            })
          });
          break;
      }
    });
  });

  function add() {

  }

  function reloadTable() {
    table.reload('permissionTableId')
  }

  function search() {
    var search = $('#search').val()
    if (!search) {
      layer.msg('请输入要搜索的内容！')
      return;
    }
    reloadTable({
      url: '/admin/role/permissionList'
      , where: {"search": search, 'roleId': roleId}
    })
  }
</script>
</html>
